<!--
 * @Author: yanghui
 * @Date: 2025-06-17 17:04:12
 * @LastEditors: yh2935159613 2935159613@qq.com
 * @LastEditTime: 2025-07-30 14:21:41
 * @FilePath: \deploy_yh_work3_success\yh_work3\src\views\ComLibrary\AciTree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="aciTree">
    <div id="chongqing-map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import chongqingGeoJson from "@/assets/chongqing.json";

let chartInstance = null;

const heatData = [
  { name: '渝北区', value: 156 },
  { name: '北碚区', value: 43 },
  { name: '江北区', value: 25 },
  { name: '渝中区', value: 28 },
  { name: '巴南区', value: 32 },
  { name: '南岸区', value: 20 },
  { name: '长寿区', value: 19 },
  { name: '九龙坡区', value: 12 },
  { name: '涪陵区', value: 10 },
  { name: '江津区', value: 9 },
  { name: '合川区', value: 8 },
  { name: '璧山区', value: 7 },
  { name: '大足区', value: 5 },
  { name: '沙坪坝区', value: 4 },
  { name: '大渡口区', value: 2 },
  { name: '万州区', value: 1 },
];

onMounted(() => {
  const dom = document.getElementById("chongqing-map");
  if (dom) {
    chartInstance = echarts.init(dom);
    echarts.registerMap("chongqing", chongqingGeoJson);
    chartInstance.setOption({
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return params.name + ': ' + params.value;
        }
      },
      geo: {
        map: "chongqing",
        roam: true,
        label: {
          show: true
        },
        itemStyle: {
          areaColor: "#e0f7fa",
          borderColor: "#0097a7"
        },
        emphasis: {
          label: { show: true, color: "#d32f2f" },
          itemStyle: { areaColor: "#b2ebf2" }
        }
      },
      visualMap: {
        min: 0,
        max: 150,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        inRange: {
          color: ['#e0f7fa', '#ffd666', '#ff4d4f'] // 更协调的渐变色
        },
        calculable: true
      },
      title: {
        text: '智能网联新能源汽车产业链企业分布全貌（企业热力）',
        left: 'center',
        top: 20,
        textStyle: {
          fontSize: 32,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      series: [
        {
          type: 'map',
          map: 'chongqing',
          geoIndex: 0,
          data: heatData.map(item => {
            const feature = chongqingGeoJson.features.find(f => f.properties.name === item.name);
            return {
              name: item.name,
              value: item.value,
              hasCoord: !!(feature?.properties.centroid || feature?.properties.center)
            };
          }),
          label: {
            show: true,
            color: '#333',
            fontWeight: 'bold',
            fontSize: 16,
            formatter: function(params) {
              // 有气泡则显示区县名，无气泡则显示数值
              return params.data.hasCoord ? params.data.name : params.data.value;
            }
          },
          labelLayout: {
            hideOverlap: true
          },
          emphasis: {
            label: { show: true, color: '#d32f2f' }
          }
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: heatData.map(item => {
            const feature = chongqingGeoJson.features.find(f => f.properties.name === item.name);
            const coord = feature?.properties.centroid || feature?.properties.center;
            // 如果没有坐标，使用重庆市中心默认坐标 [106.551556, 29.563009]
            const finalCoord = coord || [106.551556, 29.563009];
            return {
              name: item.name,
              value: [finalCoord[0], finalCoord[1], item.value]
            };
          }),
          symbolSize: 18,
          showEffectOn: 'render',
          rippleEffect: { brushType: 'stroke' },
          label: {
            show: true,
            position: 'top', // 气泡数值显示在气泡上方
            formatter: function(params) {
              return params.value[2];
            },
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 16,
            backgroundColor: '#ff4d4f',
            borderRadius: 6,
            padding: [4, 8]
          },
          labelLayout: {
            hideOverlap: false
          },
          itemStyle: {
            color: '#ff4d4f',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        }
      ]
    });
  }
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped lang="less">
.aciTree {
  width: 100%;
  height: 100%;
  overflow: visible;
}
#chongqing-map {
  width: 100%;
  height: 600px;
  overflow: visible;
}
</style>